
<template>
  <div>
    <table class="gridtable" border="1" cellSpacing="0" cellPadding="0">
      <thead>
        <tr>
          <th style="width:30px"><b>序号</b></th>
          <th style="width:100px"><b>商品名称/规格</b></th>
          <th style="width:100px"><b>商品编号</b></th>
          <th style="width:90px"><b>数量</b></th>
          <th style="width:70px"><b>单位</b></th>
          <th style="width:60px"><b>单价</b></th>
          <th style="width:60px"><b>金额</b></th>
          <th style="width:40px"><b>备注</b></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item ,index) in tableData" :key="index">
          <td style="width:40px !important;">{{ index + 1 }}</td>
          <td style="width:100px !important;">{{ item.name }}</td>
          <td style="width:90px;overflow:hidden;white-space:nowrap;">{{ item.code }}</td>
          <td style="width:70px !important;">{{ item.quantity }}</td>
          <td style="width:60px;overflow:hidden;white-space:nowrap;">{{ item.unitName }}</td>
          <td style="width:60px;overflow: hidden;white-space:nowrap;">{{ item.price }}</td>
          <td style="width:40px !important;">{{ item.total }}</td>
          <td style="width:100px !important;">{{ item.remark }}</td>
        </tr>
      </tbody>
    </table>

  </div>
</template>
<script>
export default {
  name: 'ShowGoodsList',
  props: {
    tableData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.grid{
  /deep/.el-icon-s-operation{
    font-size: 22px;
  }
  /deep/a.el-icon-s-operation:hover{
    font-size: 22px; color: #3198ff;
  }
  .table-oper {
    .el-button--mini{
      padding: 1px;
    }
  }
  /deep/.vxe-table{
    overflow: visible;
  }
  /deep/.vxe-table--body-wrapper.body--wrapper{
    overflow-x: visible;
    overflow-y: visible;
  }
  /deep/.el-input__inner{
    border: #ffffff solid 1px;
  }
  /deep/.el-input-number{
    .el-input__inner{
      border-color: #dcdfe6;
    }
  }
  /deep/.el-input__inner:focus{
    border: #409EFF solid 1px;
  }
  .btn-group{
    .el-button+.el-button{ margin-left: 5px; }
  }
}
//表格样式
table.gridtable {
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size: 10px !important;
  table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
  color: #000000;
  border-width: 1px;
  border-color: #000000;
  text-align: left;
  border-collapse: collapse;
  border-bottom: none;
}

table.gridtable th {
  padding: 2px;
  border: #000000 1px solid;
  font-weight: bold;
  background-color: #f4f4f4;
}

table.gridtable td {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #000000;
  background-color: #ffffff;
}

table.gridtable tr {
  page-break-inside: avoid;
}

table.gridtable tr th {
  font-weight: 400 !important;
}
</style>
